//import logo from './logo.svg';
import "./App.css";
import React, { Component } from "react";
import Header from "./component/Header/index";
import Footer from "./component/Footer/index";
import List from "./component/List/index";

// function App() {
//   this.state = {

//     list:[{}]
//   }
//   return (
//     <div className="App">
//       <div className='main'>
//       <Header></Header>
//       <List></List>
//       <Footer></Footer>
//       </div>
//     </div>
//   );
// }

class App extends Component {
  state = {
    list: [
      { id: 1, name: "吃饭", value: false },
      { id: 2, name: "睡觉", value: false },
      { id: 3, name: "打豆豆", value: false },
    ],
    isAllChecked: false,
  };
  add = (name) => {
    this.setState({
      list: [
        ...this.state.list,
        {
          //这里要注意undefined的问题
          id:
            this.state.list.length > 0
              ? (this.state.list.at(-1)?.id ?? 0) + 1
              : 1,
          name: name,
          value: false,
        },
      ],
    });
  };
  check = (id) => {
    this.setState({
      list: this.state.list.map((item) => {
        if (item.id === id) {
          item.value = !item.value;
        }
        return item;
      }),
    });
  };
  changeAllChecked = () => {
    this.setState({
      isAllChecked: !this.state.isAllChecked,
      list: this.state.list.map((item) => {
        //这里state还未更新
        if (item.value === this.state.isAllChecked) {
          item.value = !this.state.isAllChecked;
        }
        return item;
      }),
    });
  };
  delete = (id) => {
    this.setState({
      list: this.state.list.filter((item) => item.id !== id),
    });
  };

  deleteSome = () => {
    this.setState({
      list: this.state.list.filter((item) => !item.value),
    });
  };
  render() {
    return (
      <div className="App">
        <div className="main">
          <Header add={this.add}></Header>
          <List
            list={this.state.list}
            check={this.check}
            delete={this.delete}
          ></List>
          <Footer
            isAllChecked={this.state.isAllChecked}
            allNum={this.state.list.length}
            changeAllChecked={this.changeAllChecked}
            nowCheckedNum={
              this.state.list.filter((item) => item.value === true).length
            }
            deleteSome={this.deleteSome}
            list={this.state.list}
          ></Footer>
        </div>
      </div>
    );
  }
}

export default App;
